<template>
  <view class="wrapper">
    <view class="bg">
      <view class="title">用户登录</view>
    </view>
    <view class="login">
      <view class="row">
        <view class="text">帐号:</view>
        <view class="input">
          <u--input
              placeholder="请输入帐号号码"
              border="surround"
              v-model="username"
              clearable
          ></u--input>
        </view>
      </view>
      <view class="row">
        <view class="text">密码:</view>
        <view class="input">
          <u--input
              type="password"
              placeholder="请输入验证码"
              border="surround"
              v-model="password"
              clearable
          ></u--input>
        </view>
      </view>
      <u-button type="primary" color="#00a49c" text="登录" @click="login"></u-button>
    </view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import User from '../../api/user'
const userModel = new User()

export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  onLoad() {
  },
  methods: {
    login() {
      if (!this.username) {
        uni.showToast({
          icon: 'error',
          title: '请输入帐号号码'
        })
        return false
      }
      if (!this.password) {
        uni.showToast({
          icon: 'error',
          title: '请输入密码'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.username)) {
        uni.showToast({
          icon: 'error',
          title: '帐号号码错误'
        })
        return false
      }
      // 登录(或者是注册)
      userModel.login({
        username: this.username,
        password: this.password,
      }).then(response => {
        let { data } = response
        this.$store.dispatch('User/login', data.token).then(() => {
          uni.showToast({
            icon: 'none',
            title: '登录成功'
          })
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/bfc/product'
            })
          }, 500)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  //padding: 150rpx 20rpx;
  font-size: 24rpx;
  background: $background_color;
  height: 100vh;
  .bg {
    background-image: url('https://9q-api.97app.cn/mini/bg/user.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-bottom: -180px;
    padding-top: 10px;
    box-sizing: border-box;
    height: 300px;
    .title {
      font-size: 36rpx;
      font-weight: 700;
      color: white;
      margin: 150rpx 50rpx;
    }
  }
  .login {
    width: calc(100% - 100rpx);
    margin: 50rpx;
    background: white;
    padding: 25px 15px;
    border-radius: 10px;
    text-align: left;
    color: #333;
    boorder: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 0 7.5px 5px #e0e1e1;
    .row {
      display: flex;
      height: 60px;
      align-items: center;
      .text {
        width: 120rpx;
        text-align: right;
      }
      .input {
        padding-left: 10px;
        &.small {
          margin-top: -30px;
        }
      }
    }
  }
}
</style>
